<template>
  <div>
    <van-cell
      :title="name"
      :label="`${author} - ${name}`"
      center
    >
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <van-icon
          name="play-circle-o"
          size="0.8rem"
          @click="clickFn"
        />
      </template>
    </van-cell>
  </div>
</template>

<script>
export default {
  props: {
    name: String,
    author: String,
    id: Number
  },
  methods: {
    clickFn(){
      this.$router.push({
        path: '/play',
        query: {
          id: this.id
        }
      })
    }
  },
}
</script>

<style scoped>
/* 给单元格设置底部边框 */
.van-cell {
  border-bottom: 1px solid lightgray;
}
</style>